<template>
  <div class="blog-main">
    <!-- 页头 -->
    <div>
      <a-breadcrumb>
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 表格操作区 -->
    <div class="tb-op">
      <!-- 左侧操作区 -->
      <div>
        <a-button type="primary">创建文章</a-button>
      </div>

      <!-- 右搜索侧区 -->
      <div class="tb-search">
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="Please enter something"
          search-button
        />
      </div>
    </div>

    <!-- 表格展示区 -->
    <div class="table">
      <a-table
        :data="data"
        :loading="listBlogLoading"
        :pagination="pagination"
        @page-size-change="pageSizeChangedHandler"
        @page-change="pageChangedHandler"
      >
        <template #columns>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="概要" data-index="summary"></a-table-column>
          <a-table-column title="状态" data-index="status"></a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  size="small"
                  status="danger"
                  @click="$modal.info({ title: 'Name', content: record.name })"
                  >删除
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  @click="$modal.info({ title: 'Name', content: record.name })"
                  >编辑
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  @click="$modal.info({ title: 'Name', content: record.name })"
                  >发布
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  @click="$modal.info({ title: 'Name', content: record.name })"
                  >查看
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { LIST_BLOG } from "@/api/blog";
import { Message } from "@arco-design/web-vue";

const data = ref([]);

// 默认分页设置
const pagination = reactive({
  total: 0,
  showTotal: true,
  showPageSize: true,
  showJumper: true,
  defaultPageSize: 10,
  current: 1,
  pageSizeOptions: [2, 10, 20, 30, 40, 50],
  pageSize: 10,
  autoAdjust: false,
});
const listBlogLoading = ref(false);

// 默认请求参数
const listBlogQuery = reactive({
  page_size: pagination.defaultPageSize,
  page_number: pagination.current,
});

// 当单页显示数量发生改变时触发
const pageSizeChangedHandler = (pageSize) => {
  // 修改页面数据
  pagination.current = 1;
  pagination.pageSize = pageSize;

  // 修改请求参数
  listBlogQuery.page_number = pagination.current;
  listBlogQuery.page_size = pagination.pageSize;

  // 请求数据
  fetchBlogList();
};

// 当页码发生改变时触发
const pageChangedHandler = (page) => {
  // 修改页面数据
  pagination.current = page;

  // 修改请求参数
  listBlogQuery.page_number = page;

  // 请求数据
  fetchBlogList();
};

const fetchBlogList = async () => {
  try {
    listBlogLoading.value = true;
    console.log(listBlogQuery)
    const resp = await LIST_BLOG(listBlogQuery);
    console.log(resp);
    data.value = resp.items;
    pagination.total = resp.total;
  } catch (error) {
    // 使用反馈组件,提示错误
    Message.error({
      content: `获取博客列表失败: ${error.message}`,
      duration: 2000,
    });
  } finally {
    listBlogLoading.value = false;
  }
};

// 页面加载完后，通过api请求数据
onMounted(fetchBlogList);
</script>

<style scoped>
.blog-main {
  display: flex;
  flex-direction: column;
}

.tb-op {
  display: flex;
  margin-top: 12px;
}

.tb-search {
  margin-left: auto;
}

.table {
  margin-top: 8px;
}
</style>
